import React, { useState,useEffect } from 'react';
import { Table,Button,Pagination,Tag,Modal  } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { PaginationProps } from 'antd';
import type { TableRowSelection } from 'antd/es/table/interface';
import { specPageWithSubs } from "@/request/api"
import EditSpec from './components/EditSpec'
interface DataType {
    key: React.ReactNode;
    name: string;
    children?: DataType[];
}

const table: React.CSSProperties = {
    margin:'0 10px',
    minHeight:'calc(100vh - 190px)',
    maxHeight:'calc(100vh - 190px)',
    background: '#fff',
    borderRadius:'5px'
}
const pagination: React.CSSProperties = {
    margin:'10px 10px 0',
    background: '#fff',
    borderRadius:'5px',
    padding:'0 20px',
    display:'flex',
    height:'50px',
    justifyContent:'right',
    alignItems:'center'
}
  // rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
};
const computedTableHightFn = () => {
    let innerHeight = window.innerHeight || 500
    return innerHeight - 250
}
const Goods: React.FC = () => {
    const [checkStrictly, setCheckStrictly] = useState(false);
    const computedTableHight = computedTableHightFn()
    const [pageSize,setPageSize] = useState(10);
    const [currentPage,setCurrentPage] = useState(1);
    const [totalSize,setTotalSize] = useState(0); 
    const [dataList,setDataList] = useState([]); 
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editInfo, setEditInfo] = useState({});
    const columns: ColumnsType<DataType> = [
        {
            title: '规格名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '规格子项',
            dataIndex: 'subSpecList',
            key: 'subSpecList',
            render: ( _, {subSpecList}) => (
                <>
                    {subSpecList.map((tag) => {
                        return (
                        <Tag 
                            color="processing"
                            bordered={false} 
                            key={tag.id}
                        >
                            {tag.name}
                        </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 100,
            render: (item) => <Button type="link" onClick={()=>showModal(item)}>编辑</Button>,
        },
    ];
    const showModal = (item:any) => {
        setEditInfo(item)
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const getDataList = async() => {
        let res = await specPageWithSubs({
            pageNo:currentPage,
            pageSize:pageSize
        })
        if(res.status == 10){
            setDataList(res.data.records)
            setTotalSize(res.data.totalSize)
        }
    }
    const onChange: PaginationProps['onChange'] = (pageNumber) => {
        console.log('Page: ', pageNumber);
        setCurrentPage(pageNumber)
        getDataList()
    };
    useEffect(()=>{  
        getDataList();
    },[]);
    return (
        <>
            <Table
                style={table}
                scroll={{ y: computedTableHight }}
                columns={columns}
                pagination={false}
                rowSelection={{ ...rowSelection, checkStrictly }}
                dataSource={dataList}
            />
            <Pagination 
                style={pagination} 
                showQuickJumper 
                current={currentPage}
                pageSize={pageSize}
                total={totalSize} 
                onChange={onChange} 
            />
            <Modal title="Basic Modal"
                open={isModalOpen} 
                onOk={handleOk} 
                onCancel={handleCancel}
                destroyOnClose
            >
                <EditSpec info={editInfo}></EditSpec>
            </Modal>
        </>
    );
};
export default Goods;